<template>
<el-popover
  placement="bottom-start"
  width="400"
  trigger="click">
  <el-input v-model="queryString" style="position: relative;" clearable placeholder="请输入登录名查询" @clear="querySearch" @input.native="querySearch" >
    <i slot="suffix" class="el-icon-search el-input__icon" />
  </el-input>
<el-table :data="gridData" @row-click="handleSelect">
  <el-table-column  property="userName" label="登录名"></el-table-column>
  <el-table-column  property="nickName" label="昵称"></el-table-column>
  <el-table-column  property="dept.deptName" label="部门"></el-table-column>
</el-table>

  <el-input slot="reference"  placeholder="点击选择" :value ="getUserDisplay()" readonly>
    <i slot="prefix" class="el-icon-search el-input__icon" />
  </el-input>

</el-popover>
</template>
<script>
import {listUser} from "@/api/system/user";

export default {
  data() {
    return {queryString:"",
      userId: null,
      userName:null,
      nickName:null,
      deptName:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        userName: null
      },
      gridData: []
    };
  },
  props: {},
  methods: {
    querySearch()
    {
      if (this.queryString)
      {
        this.queryParams.userName=this.queryString;
        listUser(this.queryParams).then((response) => {
          this.gridData = response.rows;

        }).catch((err) => {
          console.log(err)
        });
      }
    },
    handleSelect(row, event, column)
    {
       this.userId = row.userId;
       this.userName = row.userName;
       this.nickName=row.nickName;
       this.deptName = row.dept.deptName;
       this.$emit("input", this.userId);
      document.body.click();
    },
    getUserDisplay()
    {
      if(this.userName)
      {
        return this.userName + " (昵称：" + this.nickName + "; 部门：" + this.deptName + ")";
      }
      return "";
    },
    reset(){
        this.userId = null;
        this.userName=null;
        this.nickName=null;
        this.deptName=null;
    }
  }
};
</script>
